<template>
    <el-dialog :close-on-click-modal="false" :title="props.title" v-model="open" append-to-body width="40%" draggable>
        <div class="pdf-preview">
            <div class="pdf-wrap">
                <vue-pdf-embed ref="pdfPrintRef" :page="state.pageNum" :source="state.source" :style="scale"
                               class="vue-pdf-embed"/>
            </div>

        </div>
        <div class="dialog-footer">
            <div class="page-tool">
                <div class="page-tool-item" @click="lastPage">上一页</div>
                <div class="page-tool-item" @click="nextPage">下一页</div>
                <div class="page-tool-item">
                    {{ state.pageNum }}/{{ state.numPages }}
                </div>
                <div class="page-tool-item" @click="pageZoomOut">放大</div>
                <div class="page-tool-item" @click="pageZoomIn">缩小</div>
                <!-- <div class="page-tool-item" @click="downloadPDF">下载</div> -->
                <div class="page-tool-item" @click="printPDF">打印</div>
                <div class="page-tool-item" @click="close">关闭</div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import VuePdfEmbed from 'vue-pdf-embed';
import {createLoadingTask} from "vue3-pdfjs";

const {proxy} = getCurrentInstance() as any

const blobUrl = ref("")
const pdfPrintRef = ref()
const open = ref(false)
const props = defineProps({
    title: {
        type: String,
        default: "打印"
    }
})

function init(blobUrlInfo: any) {
    // open.value = true
    blobUrl.value = blobUrlInfo
    state.value.source = blobUrlInfo
    const loadingTask = createLoadingTask(state.value.source);
    state.value.loading = true; // 添加一个loading状态
    loadingTask.promise.then((pdf: { numPages: number }) => {
        state.value.numPages = pdf.numPages;
        state.value.loading = false; // 加载完成后将loading状态设置为false
    });
}

function close() {
    open.value = false
    blobUrl.value = ""
    state.value.source = ""
}

const state = ref({
    source: blobUrl.value, // 预览pdf文件地址
    pageNum: 1, //当前页面
    scale: 1, // 缩放比例
    numPages: 0, // 总页数
    loading: false,//加载效果
});

// 下载pdf
function downloadPDF() {
    fetch(encodeURI(blobUrl.value)).then((res) => {
        res.blob().then((myBlob) => {
            const href = URL.createObjectURL(myBlob);
            const a = document.createElement("a");
            a.href = href;
            a.download = "report.pdf"; // 下载文件重命名，并指定文件扩展名为 ".pdf"
            document.body.appendChild(a); // 将<a>元素添加到文档中，以便进行点击下载
            a.click();
            document.body.removeChild(a); // 下载完成后移除<a>元素
        });
    });
}

function printPDF() {
    pdfPrintRef.value.print()
}

const scale = computed(() => `transform:scale(${state.value.scale})`);

function lastPage() {
    if (state.value.pageNum > 1) {
        state.value.pageNum -= 1;
    }
}

function nextPage() {
    if (state.value.pageNum < state.value.numPages) {
        state.value.pageNum += 1;
    }
}

function pageZoomOut() {
    if (state.value.scale < 2) {
        state.value.scale += 0.1;
    }
}

function pageZoomIn() {
    if (state.value.scale > 1) {
        state.value.scale -= 0.1;
    }
}

defineExpose({
    init
})

</script>
<style lang="scss" scoped>
.pdf-preview {
    position: relative;
    height: 100%;
    box-sizing: border-box;
    background-color: #e9e9e9;
}

.pdf-wrap {
    overflow-y: auto;
}

.vue-pdf-embed {
    text-align: center;
    width: 515px;
    border: 1px solid #e5e5e5;
    margin: 0 auto;
    box-sizing: border-box;
}

.page-tool {
    position: absolute;
    width: 550px;
    height: 28px;
    bottom: 0px;
    padding-left: 75px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    background: rgb(66, 66, 66);
    color: white;
    border-radius: 19px;
    z-index: 100;
    cursor: pointer;
    margin-left: 46%;
    transform: translateX(-50%);
}

.page-tool-item {
    padding: 8px 15px;
    padding-left: 10px;
    cursor: pointer;
}
</style>
